$(function (){

    $("#dg").datagrid({
       url:"/employee/selectAll",
       columns:[[
           {field:'username',title:'用户名',width:100,align:'center'},
           {field:'inputtime',title:'入职时间',width:100,align:'center'},
           {field:'tel',title:'电话',width:100,align:'center'},
           {field:'email',title:'邮箱',width:100,align:'center'},
           {field:'department',title:'部门',width:100,align:'center',formatter: function(value,row,index){
               /*判断department即可，不需要department.id，，，因为如果部门还没在数据库里填写，，，，它取不到就会报错 导致整个datagird不展示数据*/
                if(row.department){
                    return row.department.name;
                }
            }},
           {field:'state',title:'状态',width:100,align:'center',formatter: function(value,row,index){
                   if(row.state){
                       return  "<font style='color: dodgerblue'>在职</font>";
                   }else {
                        return "<font style='color:red;'>离职</font>";
                   }
               }},
           {field:'admin',title:'是否管理员',width:100,align:'center',formatter: function(value,row,index){
                   if(row.admin){
                       return  "<font style='color: dodgerblue'>是</font>";
                   }else {
                        return "<font style='color:red;'>否</font>";
                   }
               }},
       ]],
        // fit:true,
        fitColumns:true,
        rowNumbers:true,
        striped:true,
        singleSelect:true,
        pagination:true,
        rownumbers:true,
        tools:"#tb",
        onClickRow:function (rowIndex,rowDate) {
            if (rowDate.state){
                /*判断在职状态，，，离职*/
                $("#delete").linkbutton("enable");
            } else {
                $("#delete").linkbutton("disable");
            }
        }
    });

    $("#dialog").dialog({
        width:400,
        height:'auto',
        buttons:[{
            text:'保存',
            iconCls:'icon-save',
            handler:function(){

                /*点击添加按钮时，做判断*/

                /*1.看看获取id，有没有值*/
                var id = $("[name='id']").val();
                var url ;
                if (id){
                    /*id有值，说明取到了表格的数据，就是更新修改操作*/
                    url="/employee/updateEmployee";
                } else {
                    /*id没值，说明没选中数据表格上的值，那就是说明要做增加操作*/
                    url = "/employee/addEmployee";
                }

                /*提交表单*/
                $("#employeeForm").form("submit",{
                    url: url,
                    onSubmit:function(param){
                        var values = $("#role").combobox("getValues");
                        for (var i =0; i<values.length; i++) {
                            var rid = values[i];
                            param["roleList["+i+"].rid"] = rid;
                        }
                    },
                    success:function (data) {
                        console.log(data);
                        /*解析成json*/
                        data = $.parseJSON(data);
                        if(data.success){
                            $.messager.alert("温馨提示",data.msg);
                            $("#dialog").dialog("close");
                            $("#dg").datagrid("reload");
                        }else {
                            $.messager.alert("温馨提示",data.msg);
                        }
                    }
                });
            }
        },{
            text:'关闭',
            iconCls:'icon-cancel',
            handler:function(){
                $("#dialog").dialog("close");
            }
        }],
        closed:true,
    });

    $("#add").click(function (){
        $("#password").show();
        $("#dialog").dialog("setTitle","新增员工");
        $("#employeeForm").form("clear");
        $("#dialog").dialog("open");

        /*添加密码验证 必填*/
        $("[namename='password']").validatebox({required:true});
    });

    /*点击 编辑按钮*/
    $("#edit").click(function (){
        $("#employeeForm").form("clear");
        $("#dialog").dialog("setTitle","编辑员工");
        var rowData = $("#dg").datagrid("getSelected");
        if (!rowData){
            $.messager.alert("提示","选择一行数据进行编辑");
            return;
        }

        /*设置 密码输入框 隐藏*/
        $("#password").hide();

        /*取消密码 必填*/
        $("[namename='password']").validatebox({required:false});

        /*弹出 编辑框*/
        $("#dialog").dialog("setTitle","编辑员工");
        $("#dialog").dialog("open");

        /*回显部门*/
        rowData["department.id"] = rowData["department"].id;
        /*回显管理员*/
        rowData["admin"] = rowData["admin"]+"";
        /*回显状态*/
        rowData["state"] = rowData["state"]+"";

        /*回显数据 到 编辑框*/
        $("#employeeForm").form("load",rowData);

        /*回显employee的角色下拉框*/
        $.get("/employee/selectRolesByEid?eid="+rowData.id,function (data) {
            $("#role").combobox("setValues",data);
        });
    });

    /*删除按钮*/
    $("#delete").click(function (){

        /*必须选择1行数据，才能进行编辑*/
        var rowData = $("#dg").datagrid("getSelected");
        if (!rowData){
            $.messager.alert("提示","选择一行数据进行编辑");
            return;
        }
        console.log("当前选中第‘"+rowData.id+"’行。")
        $.messager.confirm("确认","是否设置为离职",function (res) {
            if (res) {
                /*点击删除 设置为离职*/
                $.get("/employee/updateState0?id="+rowData.id,function (data) {

                    /*ajax结果集*/
                    if(data.success){
                        $.messager.alert("温馨提示",data.msg);
                        /*重新加载表格*/
                        $("#dg").datagrid("reload");
                    }else {
                        $.messager.alert("温馨提示",data.msg);
                    }
                });
            }
        })
    });

    /*搜索按钮*/
    $("#searchbtn").click(function () {

        /*获取搜索框内 的数据*/
        var keyword = $("[name='keyword']").val();

        /*把搜索框内的数据 发给后台，，然后 刷新 dategrid*/
        $("#dg").datagrid("load",{selecttext:keyword}); /*文件名字是随便起的*/

    });

    /*刷新按钮*/
    $("#reload").click(function () {

        /*清空搜索框内的内容*/
        var keyword = $("[name='keyword']").val('');

        /*val(里面写了东西就是设置值，，写个单引号放着表示keyword搜索框内容为空) */

        /*刷新datagrid*/
        $("#dg").datagrid('load',{});
    });

    /*课时118-下载excel模板*/
    $("#downloadTml").click(function () {
        // alert("模板下载");
        window.open("/employee/downloadExcelTpl");
    });

    /*课时117-上传excel的dialog*/
    $("#excelUpload").dialog({
        width:260,
        height:180,
        title:"导入Excel",
        buttons:[{
            text:'保存',
            handler:function(){
                /*课时119-导入excel*/
                $("#uploadExcelFile").form("submit",{
                    url:"/employee/uploadExcelFile",
                    success:function (data) {
                        data = $.parseJSON(data);
                        /*ajax结果集*/
                        if(data.success){
                            $.messager.alert("温馨提示",data.msg);
                            /*关闭对话框*/
                            $("#excelUpload").dialog("close");
                            /*重新加载表格*/
                            $("#dg").datagrid("reload");
                        }else {
                            $.messager.alert("温馨提示",data.msg);
                        }
                    }
                });
            }
        },{
            text:'关闭',
            handler:function(){
                $("#excelUpload").dialog("close");
            }
        }],
        closed:true
    })
    /*课时117-上传excel的dialog*/
    /*导入按钮*/
    $("#inputbtn").click(function () {
        // alert("导入按钮");
        $("#uploadExcelFile").form("clear");
        $("#excelUpload").dialog("open");
    });
    /*课时115-下载excel的请求映射*/
    /*导出按钮*/
    $("#outputbtn").click(function () {
        // alert("导出按钮");
        /*发送请求*/
        window.open('/employee/downloadExcel');
    });

    /*dialog里的form表单的 ‘部门’的下拉框*/
    $("#department").combobox({
        url:'/dept/selectAll',
        width:170,
        panelHeight:'auto',
        textField:'name',
        valueField:'id',
        editable:false,
        onLoadSuccess:function () { /*数据加载完毕之后回调*/
            $("#department").each(function(i){
                var span = $(this).siblings("span")[i];
                var targetInput = $(span).find("input:first");
                if(targetInput){
                    $(targetInput).attr("placeholder", $(this).attr("placeholder"));
                }
            });
        }
    });

    /*dialog里的form表单的 ‘是否在职’的下拉框*/
    $("#state").combobox({
        width:170,
        panelHeight:'auto',
        textField:'label',
        valueField:'value',
        data:[{
            label:'是',
            value:'true',
        },{
            label:'否',
            value:'false',
        }],
        editable:false,
        onLoadSuccess:function () { /*数据加载完毕之后回调*/
            $("#state").each(function(i){
                var span = $(this).siblings("span")[i];
                var targetInput = $(span).find("input:first");
                if(targetInput){
                    $(targetInput).attr("placeholder", $(this).attr("placeholder"));
                }
            });
        }
    });

    /*dialog里的form表单的 ‘是否管理员’的下拉框*/
    $("#admin").combobox({
        width:170,
        panelHeight:'auto',
        textField:'label',
        valueField:'value',
        data:[{
            label:'是',
            value:'true',
        },{
            label:'否',
            value:'false',
        }],
        editable:false,
        onLoadSuccess:function () { /*数据加载完毕之后回调*/
            $("#admin").each(function(i){
                var span = $(this).siblings("span")[i];
                var targetInput = $(span).find("input:first");
                if(targetInput){
                    $(targetInput).attr("placeholder", $(this).attr("placeholder"));
                }
            });
        }
    });

    /*dialog里的form表单的 ‘用户角色’的下拉框*/
    $("#role").combobox({
        url: '/role/selectAllRole',
        width: 170,
        panelHeight: 'auto',
        textField: 'rname',
        valueField: 'rid',
        editable: false,
        multiple: true,
        onLoadSuccess: function () { /*数据加载完毕之后回调*/
            $("#role").each(function (i) {
                var span = $(this).siblings("span")[i];
                var targetInput = $(span).find("input:first");
                if (targetInput) {
                    $(targetInput).attr("placeholder", $(this).attr("placeholder"));
                }
            });
        }
    });

});